<!--
 * @Author: Shber
 * @Date: 2024-06-27 11:34:57
 * @LastEditors: Shber
 * @LastEditTime: 2024-07-12 11:38:21
 * @Description: 

-->
<template>
		<tm-tabbar class="tabbar_content" :showSafe="true" :autoSelect="false" v-model:active="isActive">
      <view v-for="(item, i) in tabInfo">
        <tm-tabbar-item
          v-if="item.label"
          @click="switchTab(item, i)"
          :activeColor="activeColor"
          :text="item.label"
        >
          <template #default="scope">
            <myIcon :fontSize="54" :color=" isActive === i ?'#5BACD2' : '#999999'" :name="item.icon"></myIcon>
          </template>
        </tm-tabbar-item>
        <tm-tabbar-item
          v-else
          @click="switchTab(false, i)"
          :shadow="2"
          :width="24"
          :iconSize="46"
          :beforeClick="laodingfun"
          btn-top
          fontColor="white"
          :activeColor="activeColor"
          :color="activeColor"
          icon="tmicon-plus"
        ></tm-tabbar-item>
      </view>
		</tm-tabbar>
</template>
<script setup>
  import { reactive, ref, watch } from 'vue'
  import tools from '@/utils/tools'
  import myIcon from '@/components/MyIcon/index.vue'

  const activeColor = ref('#2DAED6')
  const emits = defineEmits(['update:modelValue', 'onSubmit'])
  const props = defineProps({
    active: { // 选中项
      type: Number,
      default: 0,
    }
  })
  let tabInfo = reactive([
    {label:'查订单', icon:'myicon-dingdan-e6b5', link:'/pages/order/index'},
    {label:'档案信息', icon:'myicon-cunmindangan-e623', link:'/pages/archives/index'},
    {label:'', link:'/pages/createOrder/index'},
    {label:'数据统计', icon:'myicon-shujutongji-e60a', link:'/pages/statistics/index'},
    {label:'我的', icon:'myicon-icon7-e663', link:'/pages/userInfo/index'}
  ])

  const isActive = ref(0)
  watch(()=>props.active, (newVal)=>{
    isActive.value = newVal
  }, { immediate: true })

  const switchTab = (item, i)=>{
    if(!item){
      uni.navigateTo({ url: '/pages/createOrder/index' });
      return false
    }
    isActive.value = i
    uni.redirectTo({ url: item.link });
  }
  function laodingfun(val) {
    return new Promise((res) => {
      setTimeout(function () {
        console.log('选中了：', val)
        res(true)
      }, 10)
    })
  }

</script>
<style lang="scss" scoped>
.tabbar_content{overflow: hidden;}
// .icon_img{width: 50px; height: 50px;}
</style>